<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的信息</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
		<style>
			.img1 {
				vertical-align: middle;
			}

			.img2 {
				width: 150px;
				position: relative;
				left: 120px;
			}

			.el-button {
				position: relative;
				left: 100px;
			}
			.btn1 {
				position: relative;
				left: 0px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item><i class="el-icon-s-home"></i> <a href="index.html"
						target="_top">首页</a></el-breadcrumb-item>
				<el-breadcrumb-item>我的信息</el-breadcrumb-item>
			</el-breadcrumb>
			<div id="box2">
				<h3><img src="img/矩形 1.png" class="img1" /> 我的信息</h3>
				<hr />
				<img src="img/头像/4.jpg" class="img2" />
				<el-form ref="form" :model="tableData" label-width="80px">
					<el-form-item label="用户名">
						<el-input v-model="tableData.name" :style="{width: '20%'}"></el-input>
					</el-form-item>
					<el-form-item label="邮  箱">
						<el-input v-model="tableData.eamil" :style="{width: '20%'}"></el-input>
					</el-form-item>
					<el-form-item label="电  话">
						<el-input v-model="tableData.iphone" :style="{width: '20%'}"></el-input>
					</el-form-item>
					<el-form-item label="地  址">
						<el-input v-model="tableData.address" :style="{width: '20%'}"></el-input>
					</el-form-item>
				</el-form>
				<el-button type="success" size="mini" @click="openUp">修改密码</el-button>
				<el-button size="mini" type="primary" @click="handleAdd(scope.$index, scope.row)">保 存</el-button>
				<!-- 修改 -->
				<el-dialog title="修改密码" :visible.sync="dialogVisibleup" width="50%">
					<el-form ref="form" :model="tableData" label-width="80px">
						<el-form-item label="密码">
							<el-input v-model="tableData.password"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button size="mini" @click="dialogVisibleup = false" class="btn1">取 消</el-button>
						<el-button size="mini" type="primary" @click="onSubmitup" class="btn1">修 改</el-button>
					</span>
				</el-dialog>

			</div>
		</div>
		<script>
			new Vue({
				el: "#box1",
				data: {
					tableData: {
						name: '',
						password: '',
						eamil: '',
						iphone: '',
						address: ''
					},
					dialogVisibleup: false,
				},
				methods: {
					openUp() {
						this.dialogVisibleup=true
					},
					onSubmitup() {
						this.dialogVisibleup = false
						var that = this
						axios.post(HTTP + "updateUser/", this.tableData).then(function(res) {
							if (res.data.code == 200) {
								that.$message("修改成功");
								that.initdata();
							} else {
								that.$message("修改失败");
								that.initdata();
							}
						}).catch(err => {
							console.log(err)
						});
					},
					onSubmitAdd(index, row) {

					},
					initdata() {
						var that = this
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "selectAllUserid/" + 1).then(function(res) {
							//alert(JSON.stringify(res))
							that.tableData = res.data.data.byId
						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() {
					this.initdata();
				}
			})
		</script>
	</body>
</html>